<template>
  <div>

    <el-row style="margin-bottom: 10px;border:1px dashed lightgray; padding: 10px;border-radius: 5px;">
      <el-col :span="2">
        <el-button plain size="small" type="info" :disabled="hasNotChanged" @click="cancelChange">取消</el-button>
      </el-col>
      <el-col :span="2">
        <el-button  size="small" type="primary" :disabled="hasNotChanged" @click="submitChange">提交</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-tree

        @check="handleCheck"
        ref="permissionTree"
        :data="allPermissions"
        show-checkbox
        node-key="id"
        default-expand-all

        :props="{children:'children'}">

        <template slot-scope="scope">
          <span><span>{{scope.data.name}}</span><span style="font-size: 12px;color:gray;">{{'----------【'+translate(scope.data.typ)+'】'}}</span></span>
        </template>

      </el-tree>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "PermissionAssign",
    props: ['role'],
    data() {
      return {
        //所有权限数据，不管角色有没有这个权限
        allPermissions: [],

        //所有叶子节点权限的ID列表
        allPermissionLeafIds: [],

        //当前修改角色的所有权限ID列表
        permissionIdsOfRole: [],

        //权限树没变化，有变化来控制开关的使能
        hasNotChanged: true,

        //
        leafIdsOfRole: []

      }
    },

    watch: {

      //监听它的赋值，一旦有值过来，取交集，设置给el-tree
      permissionIdsOfRole: function (newIds, oldIds) {
        if (newIds) {
          if (this.allPermissionLeafIds && this.allPermissionLeafIds.length > 0) {
            //求交集
            this.leafIdsOfRole = newIds.filter(id => this.allPermissionLeafIds.indexOf(id) != -1);
            //将交集设置成el-tree的checkedKeys
            this.$refs.permissionTree.setCheckedKeys(this.leafIdsOfRole);

          }
        }
      },
      allPermissionLeafIds: function (newLeafIds, oldLeafIds) {
        if (newLeafIds) {
          if (this.permissionIdsOfRole && this.permissionIdsOfRole.length > 0) {
            //求交集
            this.leafIdsOfRole = this.permissionIdsOfRole.filter(id => newLeafIds.indexOf(id) != -1);
            //将交集设置成el-tree的checkedKeys
            this.$refs.permissionTree.setCheckedKeys(this.leafIdsOfRole);
          }
        }
      }

    },

    created() {
      this.api.__api__getAllPermissions()
        .then(data => {
          this.allPermissions = data.data;
        })

      this.api.__api__getAllPermissionLeafIds()
        .then(data => {
          this.allPermissionLeafIds = data.data;
        })


      console.log("role=" + JSON.stringify(this.role));
      this.api.__api__getPermissionIdsOfRole(this.role.id)
        .then(data => {
          this.permissionIdsOfRole = data.data;
        })
    },

    methods: {
      //翻译类型
      translate(typ) {
        switch (typ) {
          case 1:
            return '菜单';
          case 2:
            return '按钮';
          case 3:
            return 'URL';
          case 4:
            return '文件';
          default:
            return '未知类型';
        }
      },

      handleCheck(){
        this.hasNotChanged = false;
      },

      //提交修改
      submitChange() {

        console.log("submit...")
        //要提交的是勾上的和半选的
        let ids = this.$refs.permissionTree.getCheckedKeys();
        ids = ids.concat(this.$refs.permissionTree.getHalfCheckedKeys());

        if (ids && ids.length > 0) {
          this.api.__api__updatePermissionsOfRole({roleId: this.role.id, permissionIds: ids})
            .then(data => {
              this.permissionIdsOfRole = data.data;
              this.hasNotChanged = true;
            })
        }

      },

      //取消修改
      cancelChange(){
        this.$refs.permissionTree.setCheckedKeys(this.leafIdsOfRole);
        this.hasNotChanged = true;
      }


    }
  }
</script>

<style scoped>

</style>
